{% load static get_attribute %}

<main>
    <div
      class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200 lg:mt-1.5 dark:bg-gray-800 dark:border-gray-700">
      <div class="w-full mb-1">
        <div class="mb-4">
          <nav class="flex mb-5" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 text-sm font-medium md:space-x-2">
              <li class="inline-flex items-center">
                <a href="#"
                  class="inline-flex items-center text-gray-700 hover:text-primary-600 dark:text-gray-300 dark:hover:text-white">
                  <svg class="w-5 h-5 mr-2.5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z">
                    </path>
                  </svg>
                  Home
                </a>
              </li>
              <li>
                <div class="flex items-center">
                  <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <a href="{% url "dynamic_dt" %}"
                    class="ml-1 text-gray-700 hover:text-primary-600 md:ml-2 dark:text-gray-300 dark:hover:text-white">Dynamic DT</a>
                </div>
              </li>
              <li>
                  <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"
                      xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd"
                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                        clip-rule="evenodd"></path>
                    </svg>
                    <span class="ml-1 text-gray-400 md:ml-2 dark:text-gray-500" aria-current="page">{{ link|upper }}</span>
                  </div>
                </li>
            </ol>
          </nav>
        </div>
        <div class="items-center justify-between block sm:flex dark:divide-gray-700">
          <div class="flex items-center mb-4 sm:mb-0">
            <form id="search-form" method="GET"
              hx-get="{% url 'item_page' link %}"
              hx-target="#page-content"
              hx-swap="innerHTML"
              hx-trigger="submit"
              class="sm:pr-3 flex itmes-center gap-2"
            >
              <div>
                <label for="product-search" class="sr-only">Search</label>
                <div class="relative w-48 sm:w-64 xl:w-96">
                  <input type="text" name="search" id="product-search"
                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                    placeholder="Search for items">
                </div>
              </div>
              <div>
                <button 
                  type="submit"
                  class="inline-flex items-center justify-center w-1/2 px-3 py-2.5 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
                  <svg class="w-5 h-5 text-white dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
                  </svg>
                </button>
              </div>
            </form>
          </div>
  
          <div class="flex items-center ml-auto space-x-2 sm:space-x-3">
            <form action="" method="post">
              <button id="dropdownCheckboxButton" data-dropdown-toggle="dropdownDefaultCheckbox" class="inline-flex items-center justify-center w-1/2 px-2 py-2.5 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700" type="button">
                Hide / Show Column
                <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
                </svg>
              </button>
              <!-- Dropdown menu -->
              <div id="dropdownDefaultCheckbox" class="w-max z-10 hidden w-48 bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600">
                <ul class="p-3 space-y-3 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownCheckboxButton">
                  {% for field_name in field_names %}
                    <li>
                      <div class="flex items-center">
                        <input id="checkbox-item-{{ field_name.id }}" data-target="{{ field_name.key }}" {% if field_name.value %} checked {% endif %} type="checkbox" value="{{ field_name.key }}" name="key" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500">
                        <label for="checkbox-item-{{ field_name.id }}" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">{{ field_name.key }}</label>
                      </div>
                    </li>
                  {% endfor %}
                </ul>
              </div>
            </form>
          </div>
  
          <div class="flex items-center ml-auto space-x-2 sm:space-x-3">
              <form 
                method="post" 
                class="inline-flex items-center justify-center w-1/2 px-2 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
                hx-post="{% url 'create_page_items' link %}"
                hx-trigger="change"
                hx-target="#page-content"
                hx-swap="innerHTML"
              >
                  {% csrf_token %}
                  <select name="items" id="items" class="bg-transparent dark:text-white py-0 border-transparent focus:border-transparent focus:ring-0">
                      <option class="dark:bg-gray-800" {% if page_items == 5 %} selected {% endif %} value="5">5 Items</option>
                      <option class="dark:bg-gray-800" {% if page_items == 10 %} selected {% endif %} value="10">10 Items</option>
                      <option class="dark:bg-gray-800" {% if page_items == 15 %} selected {% endif %} value="15">15 Items</option>
                      <option class="dark:bg-gray-800" {% if page_items == 25 %} selected {% endif %} value="25">25 Items</option>
                      <option class="dark:bg-gray-800" {% if page_items == 50 %} selected {% endif %} value="50">50 Items</option>
                      <option class="dark:bg-gray-800" {% if page_items == 100 %} selected {% endif %} value="100">100 Items</option>
                  </select>
              </form>
  
            {% if request.user.is_authenticated %}
            <button type="button" 
              data-modal-target="add-item" 
              data-modal-toggle="add-item" 
              class="inline-flex items-center justify-center w-1/2 px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
                <svg class="w-5 h-5 mr-2 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
                Add
            </button>
            {% endif %}
            <div class="flex">
              <a data-modal-target="export-csv-modal" data-modal-toggle="export-csv-modal">
                <img class="w-10" src="{% static "dist/images/csv.png" %}" alt="">
              </a>
            </div>
          </div> 
        
        </div>
  
        <div class="items-end mt-4 justify-between block flex ">
          <div class="flex items-center sm:mb-0">
            <form class="sm:pr-3 w-3/12" method="post">
              {% csrf_token %}
              <div class="flex items-center gap-5">
                <div>
                  <h1 style="white-space: nowrap;" class="block mb-2 dark:text-white">Filters</h1>
                </div>
                <div>
                  <button id="addButton" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Add</button>
                </div>
              </div>
  
              <div id="inputContainer">
                {% if filter_instance %}
                  {% for filter_data in filter_instance %}
                  <div class="input-container flex align-center gap-5 mb-5">
                    <div class="flex">
                      <select name="key" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-l-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                        {% for field in db_field_names %}
                          <option {% if filter_data.key == field %}selected{% endif %} value="{{ field }}">{{ field }}</option>
                        {% endfor %}
                      </select>
                      <input name="value" value="{{ filter_data.value }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-r-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" type="text" placeholder="Enter value">
                    </div>
                    <button 
                      type="button" 
                      hx-post="{% url "delete_filter" link filter_data.id %}" 
                      hx-target="#page-content" 
                      hx-swap="innerHTML"
                      class="remove-button focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2  dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">
                    X</button>
                  </div>
                  {% endfor %}
                {% endif %}
              </div>
  
              <button 
                id="submitButton" 
                type="button" 
                hx-post="{% url "create_filter" link %}"
                hx-target="#page-content"
                hx-swap="innerHTML"
                hx-include="closest form"
                {% if not filter_instance %} style="display: none;" {% endif %} class="bg-green-500 text-white px-4 py-2 rounded-md mt-4">Submit</button>
            </form>
          </div>
  
          <div></div>
          
        </div>
      </div>
    </div>
    <div class="flex flex-col">
      <div class="overflow-x-auto">
        <div class="inline-block min-w-full align-middle">
          <div class="overflow-hidden shadow">
            <div 
              class="overflow-hidden shadow"
              id="items-container" 
              hx-target="this"
              hx-swap="innerHTML"
            >
              {% include "partials/item_list.html" %}
            </div>
          </div>
        </div>
      </div>
    </div>
  
    {% if items.has_other_pages %}
    <nav aria-label="Page navigation example" class="mt-5 ml-4">
        <ul class="inline-flex -space-x-px text-base h-10">
        {% if items.has_previous %}
            <li>
                <a hx-get="{% url 'item_page' link %}?page=1" 
                   hx-target="#page-content"
                   class="flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                    First
                </a>
            </li>
            <li>
                <a hx-get="{% url 'item_page' link %}?page={{ items.previous_page_number }}"
                   hx-target="#page-content"
                   class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                    Prev
                </a>
            </li>
        {% endif %}
    
        {% for n in items.paginator.page_range %}
            {% if items.number == n %}
            <li>
                <span class="flex items-center justify-center px-4 h-10 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">
                    {{ n }}<span class="sr-only"></span>
                </span>
            </li>
            {% elif n > items.number|add:'-3' and n < items.number|add:'3' %}
            <li>
                <a hx-get="{% url 'item_page' link %}?page={{ n }}"
                   hx-target="#page-content"
                   class="flex items-center justify-center px-4 h-10 leading-tight {% if items.number == i %}text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white{% else %}text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white{% endif %}">
                    {{ n }}
                </a>
            </li>
            {% endif %}
        {% endfor %}
        
        {% if items.has_next %}
            <li>
                <a hx-get="{% url 'item_page' link %}?page={{ items.next_page_number }}"
                   hx-target="#page-content"
                   class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                    Next
                </a>
            </li>
            <li>
                <a hx-get="{% url 'item_page' link %}?page={{ items.paginator.num_pages }}"
                   hx-target="#page-content"
                   class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                    Last
                </a>
            </li>
        {% endif %}
        </ul>
    </nav>
    {% endif %}
  
  
    <!-- Add item Modal -->
    <div id="add-item" data-modal-backdrop="static" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
        <div class="relative p-4 w-full max-w-2xl max-h-full">
            <!-- Modal content -->
            <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
                <!-- Modal header -->
                <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                        Add {{ link|capfirst }}
                    </h3>
                    <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="add-item">
                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                </div>
                <form method="post">
                {% csrf_token %}
                    <div class="p-4 md:p-5 space-y-4">
                        <div class="grid grid-cols-2 gap-3">
                            {% for key, values in fk_fields.items %}
                                <div class="col-span-1">
                                    <div class="form-group">
                                        <label for="id_{{ key }}" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ key|title }}</label>
                                        <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" name="{{ key }}" id="id_{{ key }}">
                                            {% for i in values %}
                                                <option value="{{ i.id }}">{{ i }}</option>
                                            {% endfor %}
                                        </select>                                                    
                                    </div>
                                </div>
                            {% endfor %}

                            {% for field_name in db_field_names %}
                                {% if field_name not in read_only_fields and field_name not in fk_fields_keys %}
                                    <div class="col-span-1">
                                        <div class="form-group">                                                                    
                                            <label for="id_{{ field_name }}" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ field_name|title }}</label>
                                            {% if field_name in choices_dict %}
                                                <select name="{{ field_name }}" id="id_{{ field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                                                    <option value="">Select {{ field_name }}</option>
                                                    {% for key, value in choices_dict|get:field_name %}
                                                        <option value="{{ key }}">{{ value }}</option>
                                                    {% endfor %}
                                                </select>
                                            {% else %}
                                                {% if field_name in integer_fields %}
                                                <input type="number" name="{{ field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% elif field_name in date_time_fields %}
                                                <input type="datetime-local" name="{{ field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% elif field_name in date_fields %}
                                                        <input type="date" name="{{ field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% elif field_name in email_fields %}
                                                <input type="email" name="{{ field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% elif field_name in text_fields %}
                                                <input type="text" name="{{ field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% else %}
                                                <input type="text" name="{{ field_name }}" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                {% endif %}
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                        <button 
                        type="button" 
                        hx-post="{% url "create" link %}"
                        hx-target="#items-container"
                        hx-swap="innerHTML"
                        hx-include="closest form"
                        class="w-full justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-primary-800">
                            Add
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
  
</main>
  
<!-- csv -->
<div id="export-csv-modal" tabindex="-1" aria-hidden="true" class="py-5 fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative w-full max-w-7xl max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
                <div>
                  <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                    Export as CSV
                  </h3>
                </div>
                <div class="text-xl font-semibold text-gray-900 dark:text-white">
                  {% if request.GET.order_by or request.GET.search %}
                    {% with order_by=request.GET.order_by search=request.GET.search %}
                      <a href="{% url 'export_csv' link %}?{% if order_by %}order_by={{ order_by }}{% endif %}{% if order_by and search %}&{% endif %}{% if search %}search={{ search }}{% endif %}">
                        <img class="w-8" src="{% static 'dist/images/export.png' %}" alt="">
                      </a>
                    {% endwith %}
                  {% else %}
                    <a href="{% url 'export_csv' link %}">
                      <img class="w-8" src="{% static 'dist/images/export.png' %}" alt="">
                    </a>
                  {% endif %}
                </div>
                <div>
                  <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="export-csv-modal">
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                    </svg>
                    <span class="sr-only">Close modal</span>
                  </button>
                </div>
            </div>
            <!-- Modal body -->
            <div class="p-6 space-y-6">
              <div class="flex flex-col">
                <div class="overflow-x-auto">
                  <div class="inline-block min-w-full align-middle">
                    <div class="overflow-hidden shadow">
                      {% include "dyn_dt/items-table.html" with items=items %}
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
</div>


<script>
  document.getElementById('addButton').addEventListener('click', function() {
    var fieldNames = {{ db_field_names|safe }};

    var template = `
      <div class="input-container flex align-center gap-5 mb-5">
        <div class="flex">
          <select name="key" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-l-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            ${fieldNames.map(option => `<option value="${option}">${option}</option>`).join('')}
          </select>
          <input name="value" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-r-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" type="text" placeholder="Enter value">
        </div>
        <button class="remove-button focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2  dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900" onclick="removeInputContainer(this)">X</button>
      </div>
    `;

    var tempDiv = document.createElement('div');
    tempDiv.innerHTML = template;

    document.getElementById('inputContainer').appendChild(tempDiv);

    document.getElementById('submitButton').style.display = 'inline-block';
  });

  function removeInputContainer(element) {
    var inputContainer = element.closest('.input-container');

    inputContainer.remove();
    
    var inputContainers = document.getElementsByClassName('input-container');
    if (inputContainers.length === 0) {
      document.getElementById('submitButton').style.display = 'none';
    }
  }
</script>
